<template>
  <div id="app">
    <h2>App</h2>
    <!-- 
      插槽: 父向子通信标签结构

    -->
    <Child>
      <!-- <template v-slot:default>
        <p>默认插槽内容</p>
      </template> -->
      <!-- <template #default>
        <p>默认插槽内容</p>
      </template> -->
      <p>默认插槽内容22</p>

      <template #footer>
        <p>footer插槽内容22</p>
      </template>
    </Child>

    <!-- 完成的是绿色 -->
    <List :todos="todos">
      <!-- 
        子组件中传递给slot标签的所有属性自动进入xxx对象中
        {row: todo对象, $index: 下标}
       -->
      <template v-slot="xxx">
        <span :style="{color: xxx.row.complete?'green': 'black'}">{{ xxx.row.title }}</span>
      </template>
    </List>
    
    <!-- 每个行要有序号, 字体颜色blue/green -->
    <List :todos="todos">
      <template #="{row, $index}">
        <span :style="{color: $index%2===1?'green': 'blue'}">{{ $index + 1 }}---{{ row.title }}</span>
      </template>
    </List>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Child from './Child.vue'
import List from './List.vue'

const todos = ref([
  {id: 1, title: 'AAAA', complete: false},
  {id: 2, title: 'BBBB', complete: true},
  {id: 3, title: 'CCCC', complete: false},
])

</script>

